import { Button, Col, Input, Row, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import axios from '../axios';
const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    key: 'key',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '部门',
    key: 'department',
    dataIndex: 'department',
  },
  {
    title: '星期六',
    key: 'sat',
    dataIndex: 'sat',
  },
  {
    title: '星期天',
    key: 'sun',
    dataIndex: 'sun',
  },
  {
    title: '星期一',
    key: 'mon',
    dataIndex: 'mon',
  },
  {
    title: '星期二',
    key: 'tue',
    dataIndex: 'tue',
  },
  {
    title: '星期三',
    key: 'wen',
    dataIndex: 'wen',
  },
  {
    title: '星期四',
    key: 'thur',
    dataIndex: 'thur',
  },
  {
    title: '星期五',
    key: 'fri',
    dataIndex: 'fri',
  },
];
const data1 = [
  {
    key: '1',
    name: '张三',
    department: '浙江一组',
    sat: '早班、中班、晚班',
    sun: '休息',
    mon: '早班、中班',
    tue: '早班、中班',
    wen: '早班、中班',
    thur: '早班、中班',
    fri: '早班、中班',
  },
  {
    key: '2',
    name: '张三',
    department: '浙江一组',
    sat: '早班、中班、晚班',
    sun: '休息',
    mon: '早班、中班',
    tue: '早班、中班',
    wen: '早班、中班',
    thur: '早班、中班',
    fri: '早班、中班',
  },
  {
    key: '3',
    name: '张三',
    department: '浙江一组',
    sat: '早班、中班、晚班',
    sun: '休息',
    mon: '早班、中班',
    tue: '早班、中班',
    wen: '早班、中班',
    thur: '早班、中班',
    fri: '早班、中班',
  },
  {
    key: '4',
    name: '张三',
    department: '浙江一组',
    sat: '早班、中班、晚班',
    sun: '休息',
    mon: '早班、中班',
    tue: '早班、中班',
    wen: '早班、中班',
    thur: '早班、中班',
    fri: '早班、中班',
  },
];
const data2 = [
  {
    key: '1',
    name: '张三',
    department: '浙江一组',
    sat: '12H',
    sun: '休息',
    mon: '8H',
    tue: '8H',
    wen: '8H',
    thur: '8H',
    fri: '8H',
  },
  {
    key: '2',
    name: '张三',
    department: '浙江一组',
    sat: '12H',
    sun: '休息',
    mon: '8H',
    tue: '8H',
    wen: '8H',
    thur: '8H',
    fri: '8H',
  },
  {
    key: '3',
    name: '张三',
    department: '浙江一组',
    sat: '12H',
    sun: '休息',
    mon: '8H',
    tue: '8H',
    wen: '8H',
    thur: '8H',
    fri: '8H',
  },
  {
    key: '4',
    name: '张三',
    department: '浙江一组',
    sat: '12H',
    sun: '休息',
    mon: '8H',
    tue: '8H',
    wen: '8H',
    thur: '8H',
    fri: '8H',
  },
];

export default function DayCalendar() {
  const [value, setValue] = useState(1);
  //获取员工信息
  const [employee, setEmployee] = useState([]);
  const getEmployee = async () => {
    const {
      data: { data },
    } = await axios.get('getEmployee');
    console.log('======= data =======\n', data);
  };
  useEffect(() => {
    getEmployee();
  }, []);
  return (
    <div style={{ position: 'relative' }}>
      <div
        className="dayJob-header"
        style={{ display: value != 0 ? 'block' : 'none' }}
      >
        <Row>
          <Col span={6}>
            <label>日程名称：</label>
            <Input placeholder="输入日程名称" className="dayJob-header-input" />
          </Col>
          <Col span={6}>
            <label>类型：</label>
            <Select
              className="dayJob-header-select"
              defaultValue="全部"
              style={{ width: 120 }}
              options={[
                {
                  value: '上午班',
                  label: '上午班',
                },
                {
                  value: '下午班',
                  label: '下午班',
                },
                {
                  value: '全天班',
                  disabled: true,
                  label: '全天班',
                },
                {
                  value: '夜班',
                  label: '夜班',
                },
              ]}
            />
          </Col>
          <Col span={6}>
            <Button type="primary" style={{ borderRadius: '10px' }}>
              查询
            </Button>
          </Col>
          <Col span={6}>
            <Button style={{ borderRadius: '10px' }}>重置</Button>
          </Col>
        </Row>
      </div>
      <div
        style={{
          position: 'absolute',
          top: value != 0 ? '120px' : '0px',
          width: '100%',
        }}
      >
        <Button
          type="primary"
          style={{ marginRight: '10px' }}
          onClick={() => {
            setValue(1);
          }}
        >
          班次表
        </Button>
        <Button
          type="primary"
          onClick={() => {
            setValue(2);
          }}
        >
          工时表
        </Button>
        <div style={{ display: value == 1 ? 'block' : 'none' }}>
          <Table columns={columns} dataSource={data1} />
        </div>
        <div style={{ display: value == 2 ? 'block' : 'none' }}>
          <Table columns={columns} dataSource={data2} />
        </div>
      </div>
    </div>
  );
}
